<!--
 * @Author: lixingda 1789539054@qq.com
 * @Date: 2025-02-27 19:49:58
 * @LastEditors: lixingda 1789539054@qq.com
 * @LastEditTime: 2025-02-27 20:24:53
 * @FilePath: \vue-admin-template\src\views\allowInstition\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="allow-page">
    <div class="title">
      <div class="icon" />属性验证
    </div>
    <div class="tab-list">
      <div v-for="(item, index) in tabList" :key="index" :class="activeTab === index ? 'active' : 'not-active'" class="tab-item" click="activeTab = index">
        {{ item.name }}({{ item.quantity }})
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="time"
          label="申请时间"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="hopsital"
          label="工作医院"
        />
        <el-table-column
          prop="keshi"
          label="科室"
        />
        <el-table-column
          prop="zhicheng"
          label="职称"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state === 0"
              type="text"
              style="color: #8dd08d;"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >已验证</el-button>
            <el-button v-else type="primary" size="mi">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabList: [
        {
          quantity: 7,
          name: '全部'
        },
        {
          quantity: 5,
          name: '已通过'
        },
        {
          quantity: 2,
          name: '未通过'
        }
      ],
      tableData: [
        {
          time: '2024-01-27 19:49:58',
          email: '123123@qq.com',
          hopsital: '北京协和医院',
          keshi: '心血管',
          zhicheng: '教授',
          state: 0
        },
        {
          time: '2024-02-12 19:49:58',
          email: 'as212@163.com',
          hopsital: '260医院',
          state: 0
        },
        {
          time: '2024-07-12 19:49:58',
          email: '12dasx@163.ccom',
          hopsital: '河北人民医院',
          keshi: '内科',
          zhicheng: '教授',
          state: 1
        },
        {
          time: '2024-07-16 19:49:58',
          email: '12dasx@163.ccom',
          hopsital: '河北胸科医院',
          state: 0
        },
        {
          time: '2024-09-27 19:49:58',
          email: '1789539054@qq.com',
          hopsital: '河北胸科医院',
          keshi: '心内科',
          zhicheng: '教授',
          state: 1
        },
        {
          time: '2024-11-27 12:49:58',
          email: '123123@qq.com',
          hopsital: '北京协和医院',
          keshi: '心血管',
          zhicheng: '教授',
          state: 0
        },
        {
          time: '2024-12-12 09:49:58',
          email: 'as212@163.com',
          hopsital: '260医院',
          state: 0
        }
      ]
    }
  },
  methods: {
    handleEdit(index, data) {
      console.log(index, data)
    }
  }
}
</script>
<style scoped lang="scss">
    .allow-page{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding: 20px;
      height: calc(100vh - 50px) !important;
      .title{
        display: flex;
        align-items: center;
        color: #666666;
        .icon{
            width: 3px;
            height: 18px;
            background-color: #0099cc;
            margin-right: 7px;
        }
      }
      .tab-list{
        display: flex;
        height: 60px;
        margin-top: 20px;
        margin-bottom: 20px;
        .tab-item{
            width: 140px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin-right: 10px;
            padding-bottom: 6px;
        }
        .active{
            color: #0099cc;
            border-bottom: 2px solid #0099cc;
        }
        .not-active{
            color: #333333;
            border-bottom: 2px solid #ffffff;
        }
      }
    }
</style>
